
// 分页器
class Pagination {
    // 拼接，从后往前拼接
    constructor(count, options) {
        Object.assign(this, {
            // // 一页默认显示十条数据; 
            show_num: 20,
            //当前的页码;
            index: 0,
            //多少条数据data
            count: count,
            //中间显示的页码数量
            show_page_count: 5,
            pagination : "",
            callback : function(){},
        }, options)
        this.pagination = document.querySelector(this.pagination);
        //计算总共多少页数
        this.total_page_num = Math.ceil(this.count / this.show_num);
        // show_page_count 数据必须是奇数
        if (this.show_page_count % 2 !== 1) {
            this.show_page_count++;
        }
        // 渲染分页器,进一步渲染页面
        this.renderBullet();
        // 绑定事件
        this.bindEvent();
        // console.log(1);
    }
    //绑定事件 
    bindEvent() {
        // 注意单词拼写，和不要在事件中加空格
        on(this.pagination, "click", "span", (e) => {
            console.log(e.origin.innerText);
            //对应index的 当前点击元素的下标
            this.index = e.origin.innerText - 1;
            this.renderBullet();
        })
        // 开头绑定事件
        on(this.pagination, "click", ".start", (e) => {
            this.index = 0;
            this.renderBullet();
        })
        // 结尾绑定事件
        on(this.pagination, "click", ".end", (e) => {
            this.index = this.total_page_num - 1;
            this.renderBullet();
        })
        on(this.pagination , "click", ".prev", (e)=>{
                this.reduce();
        })
        on(this.pagination , "click", ".next", (e)=>{
                this.add();
        })
        // 防止在点击的时候会选中文本
        this.pagination.addEventListener("selectstart" , (e) =>{
            e.preventDefault();
        })
    }
    renderBullet() {
        let html = "";
        //基础功能
        // for(let i = 1 ; i <= this.total_page_num ; i ++){
        //       html += `<span ${ i - 1 === this.index ? "class='active'" : ""}>${ i }</span>`
        // } 
        html += "<em class ='prev'>上一页</em>"
        html += "<strong class = 'start' >开头</strong>"

        // 写出每个分页
        // 让后续页面持续显示五个分页
        //写的开始范围,和后面显示的开头
        let start = this.index - 1;
        // 后面显示的结尾
        let end = this.index + 3;


        //若当前index = 0;
        if (this.index <= 2) {
            start = 1;
            // 调整首次显示的个数
            end = start + this.show_page_count;
        
        }
        //结尾显示6个
        if (this.total_page_num > this.show_page_count + 1 && this.index >= this.total_page_num - 2) {
            end = this.total_page_num;
            start = end - 5;
        }
        if(end >= this.total_page_num){
            end = this.total_page_num;
        }
        if(!(this.total_page_num > this.show_page_count + 1)){
            start = 1 
        }

        if (this.total_page_num > this.show_page_count + 1 && this.index >= 3) {
            html += "<span>1</span>";
            html += "<b>...</b>";
        }

        for (var i = start; i <= end; i++) {
            html += `<span ${i - 1 === this.index ? "class = 'active'": "" }>${i}</span>`
        }
        if (this.total_page_num > this.show_page_count + 1 &&this.index <= this.total_page_num - 4) {
            html += `<b>...</b>`;
            html += `<span>${this.total_page_num}</span>`;
        }
        html += "<strong class = 'end'>结尾</strong>"
        html += "<em class = 'next'>下一页</em>"

        this.pagination.innerHTML = html;
        // 调用新增的回调函数; 
        this.callback(this.index ,  this.show_num);
    }
       
    add(){
        if(this.index >= this.total_page_num - 1){
            return false;
        }
        this.index ++;
        this.renderBullet();
        
    }
    reduce(){
        if(this.index <= 0){
            return false;
        }
        this.index --;
        this.renderBullet();
        
    }
}
